<template>
  <div>
    <el-table
      v-if="noResponse"
      v-loading="loading"
      style="width: 100%;height: 390px;margin: 10px auto;z-index: 1">
    </el-table>
    <el-empty v-if="isEmpty" :image-size="200"></el-empty>
    <div id="target">
      <div class="news-box" v-if="!isEmpty" v-for="(item,index) in contentData" :key="index">
        <div class="new-head">
        <router-link target="_blank" :to="{path:'/userHomePage', query:{ userId : item.reportUserId }}" title="举报人" >
          <div class="info user report"><i class="iconfont icon-jubaoren"></i>
            {{item.reportUserNickname==""? item.reportUserId : item.reportUserNickname}}
          </div>
        </router-link>
        <router-link target="_blank" :to="{path:'/userHomePage', query:{ userId : item.reportedUserId }}" title="被举报人">
          <div class="info user reported"><i class="iconfont icon-beijubaorenxinxi"></i>
            {{item.reportedUserNickname==""? item.reportedUserId : item.reportedUserNickname}}
          </div>
        </router-link>
        <a href="javascript:;" :title=item.reportedClassify>
          <div class="info label">
            <i class="iconfont icon-biaoqian"></i>
            <strong>{{item.reportedClassify}}</strong>
          </div>
        </a>
        <a href="javascript:;" title="被举时间">
          <div class="info time"><i class="iconfont icon-shijian3"></i>
            {{item.date}}
          </div>
        </a>
        <a href="javascript:;"  @click="centerDialogVisible(item.reportId)" title="忽略此条举报">
<!--        <a href="javascript:;"  @click="centerDialogVisible(item.reportedContextId,item.reportUserId)" title="忽略此条举报">-->
          <div class="info link"><i class="iconfont icon-hulve" style="font-size: 23px"></i></div>
        </a>
        <a href="javascript:;"  title="删除举报对象">
          <div class="info ignore" @click="deleteReportedContext(item.reportId,item.reportedContextId)">
            <i class="iconfont icon-shanchu" style="font-size: 22px"></i>
          </div>
        </a>
        </div>
        <div>
          <a href="javascript:;">
            <div class="new-content">
              <div id="md-editor-box">
                <v-md-editor
                  :value=item.reportedContextAddr
                  mode="preview"
                ></v-md-editor>
              </div>
            </div>
            <div class="new-bottom-control" @click="openAndClose($event)">查看举报对象</div>
          </a>
        </div>
      </div>
      <el-pagination
        v-if="!isEmpty && !noResponse"
        background
        layout="prev, pager, next"
        :total=pageTotal
        @current-change="handleCurrentChange(currentPage)"
        :current-page.sync = currentPage
        class="page">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "AdminNews",
        data(){
            return{
                loading:"true",
                isEmpty:false,
                noResponse: true,
                // text:'`这里将来就是被举报的内容...`',
                baseURL:'http://localhost:8081/adminPage/getReportInfo/',
                baseURL2:'http://localhost:8081/adminPage/getPages/adminPageReportInfo',
                baseURL3:'http://localhost:8081/adminPage/ignoreReport/',
                baseURL4:'http://localhost:8081/adminPage/deleteReportedContext/',
                contentData:'',
                pageTotal:0,
                currentPage:1  // 当前页
            }
        },
        mounted(){
            this.$emit("component","news")
            this.getNewsInfo()
            this.getPages()
        },
        methods:{
            getNewsInfo(){
                this.axios.post(this.baseURL+this.currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data == false){
                        this.$message.error("服务器异常")
                    } else if (res.data == "empty") {
                        this.isEmpty = true
                    } else {
                        this.contentData = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getPages(){
                this.axios.post(this.baseURL2).then(res=>{
                    this.pageTotal = res.data * 10
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            centerDialogVisible(reportId){
                this.$confirm('此操作将忽略此条举报内容, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    this.axios.post(this.baseURL3 + reportId).then(res=>{
                        if (res.data == true) {
                            this.successOpt("已忽略该举报内容")
                            this.getNewsInfo()
                        } else {
                            this.failOpt("服务器异常，处理失败")
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }).catch(() => {
                    console.log('已取消忽略')
                });
            },
            deleteReportedContext(reportId,reportedContextId){
                this.$confirm('此操作将永久删除此条举报内容, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    this.axios.post(this.baseURL4 + reportId + "/" + reportedContextId).then(res => {
                        if (res.data == true) {
                            this.successOpt("违规内容删除成功")
                            this.getNewsInfo()
                        } else {
                            this.failOpt("违规内容删除失败")
                        }
                    }).catch(
                        exception => {
                            console.log(exception)
                        }
                    )
                }).catch(() => {
                    console.log('已取消删除')
                });
            },
            handleCurrentChange(currentPage){
                this.axios.post(this.baseURL+currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data != "empty"){
                        this.contentData = res.data
                        let target = document.getElementById("target").offsetTop
                        window.scrollTo({
                            top:target,
                            behavior: "smooth"
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            openAndClose(e){
                if (e.currentTarget.innerHTML == "查看举报对象"){
                    // previousElementSibling : 获取上一个元素
                    e.target.previousElementSibling.style.height = e.target.previousElementSibling.firstElementChild.offsetHeight + "px"
                    e.target.innerHTML = "收起"
                    e.target.style.borderTop = "0.5px solid #e8e8e8"
                } else {
                    e.target.previousElementSibling.style.height = "0px"
                    e.target.innerHTML = "查看举报对象"
                    e.target.style.borderTop = "0.5px solid transparent"
                }
            },

            successOpt(message) {
                this.$notify({
                    title: '成功',
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: '错误',
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .new-head{
    width: 100%;
    height: 60px;
    border-bottom: 0.5px solid #e8e8e8;
  }

  .news-box{
    width: 100%;
    /*min-height: 70px;*/
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    letter-spacing: 1px;
    transition: 0.3s;
    margin-bottom: 10px;
    position: relative;
  }
  .news-box:hover{
    box-shadow: 0 0 5px rgb(173, 173, 173);
    transform:translateY(-1.3px);
  }
  .info{
    float: left;
    height: 60px;
    /*height: 70px;*/
    line-height: 70px;
    text-align: left;
    color: rgb(101, 101, 101);
    font-size: 13px;

    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .info i{
    font-size: 20px;
  }
  .report{
    margin-left: 2%;
    width: 18%;
  }
  .report i{
    color: rgb(136, 175, 58);
  }
  .report:hover i{
    font-weight: bolder;
  }
  .reported{
    width: 18%;
  }
  .reported i{
    color: rgb(200, 84, 51);
  }
  .reported:hover i{
    font-weight: bolder;
  }
  .label{
    width: 29%;
    /*background-color: tomato;*/
  }
  .label i{
    font-size: 16px;
    color: rgb(79, 83, 190);
  }
  .time{
    width: 20%;
    /*background-color: tomato;*/
  }
  .time i{
    font-size: 18px;
    color: rgb(154, 154, 154);
  }
  .link{
    width: 6%;
    text-align: center;
  }
  .link i{
    font-size: 27px;
    color: rgb(213, 213, 213);
  }
  .link:hover i{
    color: rgb(37, 171, 0);
  }
  .ignore{
    width: 6%;
    text-align: center;
  }
  .ignore i{
    color: rgb(213, 213, 213);
    font-size: 27px;
  }
  .ignore:hover i{
    color: rgb(211, 39, 39);
  }


  .new-content{
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: .5s;
  }
  .new-bottom-control{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    /*box-shadow:  0px  -15px 15px -5px rgb(255, 255, 255);*/
    background-color: white;
    transform: translate3d(0, 0, 0);
  }
  .new-bottom-control:hover{
    color: #4d8e90;
    font-weight: bolder;
  }

  .page{
    margin: 10px auto;
    margin-left: -10px;
  }
</style>
